<template>
	<view class="frame">
		<view>
		<u-navbar :is-back="true" title="个人主页" :background="background">
		</u-navbar>
		<image src="/static/index/homePage.png" class="background-img"></image>
		</view>
		<view class="frame-white">
			<view class="icon-background flexcen">
			<image :src="avatar"  class="avatar-icon"></image>
			</view>
			<view class="flexal" style="margin-left: 64rpx;margin-top: 8rpx;">
				<view class="text">姓名</view>
				<image src="/static/index/start.png" class="start-icon"></image>
			</view>
			<view style="display: flex;padding-left: 16rpx;margin-top: 40rpx;">
				<view class="frame-item flexcen">
					<view style="display: grid;">
						<image src="/static/index/message.png" class="icon"></image>
						<text>消息</text>
					</view>
				</view>
				<view class="frame-item flexcen">
					<view style="display: grid;">
						<image src="/static/index/audio.png" class="icon"></image>
						<text>语音</text>
					</view>
				</view>
				<view class="frame-item flexcen">
					<view style="display: grid;">
						<image src="/static/index/video.png" class="icon"></image>
						<text>视频</text>
					</view>
				</view>
			</view>
		</view>
		<view class="frame-block">
			<view class="block-content flexal">
				<view style="font-weight: 400;font-size: 30rpx;color: #000000;flex:1">备注与描述</view>
				<u-input v-model="value" :type="type" :border="border" :custom-style="{'text-align': 'right'}" placeholder="编辑内容" />
			</view>
			<view class="frame-line"></view>
			<view class="block-content flexal">
				<view style="font-weight: 400;font-size: 30rpx;color: #000000;flex:1">设为星标联系人 </view>
				<u-switch v-model="checked" size="40"></u-switch>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
						backgroundColor: 'rgba(255, 0, 0, 0)',
				},
				avatar:'https://cdn.uviewui.com/uview/album/10.jpg',
				value: '',
				type: 'text',
				border: false,
				checked:false,
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	.frame{
		background: #F3F4F6;
	}
	.background-img{
		top: 0rpx;
		position: fixed;
		width: 750rpx;
		height: 300rpx;
	}
	.avatar-icon{
		width: 138rpx;
		height: 138rpx;
		border-radius: 50%;
	}
	.icon-background{
		margin-top: 140rpx;
		margin-left: 32rpx;
		position: relative;
		width: 148rpx;
		height: 148rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.16);
		border: 2rpx solid #FFFFFF;
		border-radius: 50%;
	}
	.frame-white{
		width: 750rpx;
		height: 389rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.start-icon{
		margin-left: 28rpx;
		width: 34rpx;
		height: 32rpx;
	}
	.text{
		font-weight: 500;
		font-size: 40rpx;
		color: #333333;
	}
	.frame-item{
		margin-left: 16rpx;
		width: 218rpx;
		height: 122rpx;
		background: #F5F6F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.icon{
		width: 50rpx;
		height: 50rpx;
	}
	.frame-block{
		margin-top: 32rpx;
		margin-left: 32rpx;
		// padding-top: 32rpx;
		width: 686rpx;
		height: 199rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.block-content{
		padding: 20rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
	}
	.frame-line{
		margin-left: 32rpx;
		width: 622rpx;
		height: 0rpx;
		border: 1rpx solid #707070;
		opacity: 0.17;
	}
</style>
